<template>
  <div class="card">
    <Card style="border-top: 10px solid #bc1f27;">
      <div class="bankInfoTitle">
        <div class="bankType">
          <img :src="src" alt="">
          <span class="bankName">{{getBankName(info)}}</span>
        </div>
        <div class="bankStatus">
          <Tag :color="getStatus(info).color">{{getStatus(info).value}}</Tag>
        </div>
      </div>
      <div class="bankInfoContent">
        <div class="bankItem">
          <span>账户名称：</span>
          <span>{{info.account}}</span>
        </div>
        <div class="bankItem">
          <span>账号类型：</span>
          <span>{{getAccountType(info)}}</span>
        </div>
        <div class="bankItem">
          <span>银行区域：</span>
          <span>{{info.bankArea}}</span>
        </div>
        <div class="bankItem">
          <span>银行名称：</span>
          <span>{{info.target}}</span>
        </div>
        <div style="font-weight: 700;font-size: 24px">
          {{info.bankCode}}
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  import banks from '../../bank.js'

  export default {
    name: "bankCard",
    props: {
      info: Object
    },
    data() {
      return {
        src: require('@/assets/bankIcon/icbc.png'),
        accountTypes: [
          {
            key: '手续费',
            value: '1',
            color: 'primary'
          },
          {
            key: '出单费',
            value: '2',
            color: 'success'
          },
          {
            key: '保全费',
            value: '3',
            color: 'error'
          },
          {
            key: '服务费',
            value: '4',
            color: 'warning'
          }
        ],
        banks: banks
      }
    },
    computed: {},
    methods: {
      color(status) {
        return 'cyan'
      },
      getBankName(row){
        let txt = '';
        this.banks.map(bank => {
          if (bank.text === row.systemBankName) {
            txt = bank.value
          }
        });
        return txt
      },
      getAccountType(row){
        let txt = '';
        this.accountTypes.map(bank => {
          if (bank.value === row.accountType) {
            txt = bank.key
          }
        });
        return txt
      },
      getStatus(row){
        let list = [
          {
            key: '1',
            value: '待审核',
            color: 'gold'
          },
          {
            key: '2',
            value: '已审核',
            color: 'geekblue'
          },
          {
            key: '3',
            value: '已退回',
            color: 'red'
          },
          {
            key: '4',
            value: '已通过',
            color: 'green'
          },
        ];
        let obj;
        for (let i = 0; i < list.length; i++) {
          if (row.status === list[i].key) {
            obj = list[i];
            break
          }
        }
        return obj
      }
    }
  }
</script>

<style scoped lang="less">
  .card {
    padding: 12px;

    .bankInfoTitle {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .bankType {
        img {
          width: 32px
        }
        .bankName{
          font-weight: 700!important;
        }
      }
    }

    .bankInfoContent {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 36px;
    }
  }
</style>
